<template>
  <div class="chat_hall">
    <div class="hall_nav">
      <nav-vue @filterRoom="filter"></nav-vue>
    </div>
    <div class="hall_room">
      <hall-list :filterRoom="filterRoom"></hall-list>
    </div>
  </div>
</template>

<script>
import hallList from "./hallList.vue"
import navVue from "./nav.vue"
export default {
  name: 'Chat',

  data() {
    return {
      result: [], // 所有房间数据
      filterRoom:[] // 过滤后的房间数据
    };
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.$api.getAllRoom().then(res => {
        if(res instanceof Object){
          this.result = res.data
          this.filterRoom = res.data
        }
      })
    },
    // 菜单分类过滤
    filter(item){
      item.indexOf('全部') != -1 ? this.filterRoom = this.result : this.filterRoom = this.result.filter(v => v.channel == item)
    }
  },

  components: {
    navVue,hallList
  }
};
</script>

<style scoped>
.chat_hall{
  display: flex;
  width: 100%;
  background-color: #ececec;
  padding: 20px;
}
.chat_hall .hall_nav{
  width: 220px;
}
.chat_hall .hall_room{
  flex: 1;
}
@media screen and (max-width:800px) {
  .chat_hall{
    padding: 0;
    flex-direction: column;
  }
  .chat_hall .hall_nav{
    width: 100%;
  }
  .chat_hall .hall_room{
    margin: 0;
  }
}
</style>